<template>
  <div class="voucherCenter">
    <div style="display: flex; background-color: white">
      <div class="balances">
        <div>您的当前余额：</div>
        <div>
          <span style="font-size: 24px">{{ numberToCurrencyNo(parseFloat(moeny.toString().split('.')[0])) }}.</span
          ><span style="font-size: 16px">{{ moeny.toFixed(2).toString().split('.')[1] || '00' }} 元</span>
        </div>
      </div>
      <div class="balances">
        <div>信用额度：</div>
        <div>
          <span style="font-size: 24px">{{ numberToCurrencyNo(parseFloat(credit.toString().split('.')[0])) }}.</span
          ><span style="font-size: 16px">{{ credit.toFixed(2).toString().split('.')[1] || '00' }} 元</span>
        </div>
      </div>
    </div>

    <div class="rechage">
      <prim-tab :tab-menu="tabMenu" :current-menu="currentMenu" @handle-click="handleUpdateCurrentMenu"></prim-tab>
      <rechage v-if="currentMenu === 'rechage'" />
      <rechageRecord v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { numberToCurrencyNo } from '@/utils'
  import PrimTab from '@/components/PrimTab.vue'
  import rechage from './rechage.vue'
  import rechageRecord from './rechageRecord.vue'
  import { TabMenuItem } from '@/types/public'
  import rechageService from '@/api/voucherCenter/rechageService'
  import mitt from '@/utils/mitt'

  const moeny = ref<number>(0)
  const credit = ref<number>(0)

  const tabMenu = reactive<Array<TabMenuItem>>([
    {
      id: 'rechage',
      text: '在线充值'
    },
    {
      id: 'rechageRecord',
      text: '充值记录'
    }
  ])
  const currentMenu = ref('rechage')
  const handleUpdateCurrentMenu = (str: string) => {
    currentMenu.value = str
  }
  const queryBalance = () => {
    rechageService.balanceQuery({ userId: localStorage.getItem('userId') }).then((res) => {
      if (res.status === 200) {
        moeny.value = res.data.data.amount
        credit.value = res.data.data.debtAmount
      }
    })
  }
  queryBalance()
  mitt.on('queryBalance', queryBalance)
  mitt.on('handleUpdateCurrentMenu', handleUpdateCurrentMenu)
  onUnmounted(() => {
    mitt.off('queryBalance', queryBalance)
    mitt.off('handleUpdateCurrentMenu', handleUpdateCurrentMenu)
  })
</script>
<style lang="scss" scoped>
  .voucherCenter {
    .balances {
      background-color: #fff;
      padding: 22px 0;
      padding-left: 30px;

      div {
        display: inline-block;
        color: $text-color;
      }

      span {
        color: $main-color;
      }
    }

    .rechage {
      margin-top: 20px;
      background: #fff;
      padding: 20px 30px;

      :deep(.prim-tab) {
        font-weight: bold;
      }
    }
  }
</style>
